<wide-header-page title="{{'Network Fee Policy'|translate}}">
    <div page-content>
        <div class="description" translate>The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.</div>
        
        <ion-list no-lines>
            <div *ngFor="let coinFeePolicy of coinFeePolicies | keys">
                <ion-item-divider></ion-item-divider>
                <ion-item no-lines no-padding no-margin>
                    <ion-row>
                        <ion-icon >
                            <img src="assets/img/currencies/{{coinFeePolicy.key}}.svg" alt="Coin">
                        </ion-icon> 
                        <span  class="network-fee-policy-title" translate>{{ getCoinName(coinFeePolicy.key) }} Network Fee Policy</span> 
                    </ion-row>
                    <ion-row>
                        <span class="network-fee-policy-rate">{{ coinFeePolicy.value.feePerSatByteStr }}</span> 
                    </ion-row>
                </ion-item>
                <ion-item no-padding no-margin>
                    <ion-range [ngClass]="{'btc-range': coinFeePolicy.key == 'btc','eth-range': coinFeePolicy.key == 'eth'}" min="0" max="{{maxRanges[coinFeePolicy.key]}}" step="1" snaps="true" color="{{coinFeePolicy.key}}-color" [(ngModel)]="coinFeePolicies[coinFeePolicy.key].rangeValue" (ionChange)="save(coinFeePolicy.key)"></ion-range>
                </ion-item>
                <ion-row class="range-label" *ngIf="coinFeePolicy.key != 'eth'">
                    <ion-col text-start [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 0}">{{'Super Economy' | translate}}</ion-col>
                    <ion-col text-center [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 2}">{{'Normal' | translate}}</ion-col>
                    <ion-col text-end [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 4}">{{'Urgent' | translate}}</ion-col>
                </ion-row>
                <ion-row class="range-label" *ngIf="coinFeePolicy.key == 'eth'">
                    <ion-col text-start [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 0}">{{'Low' | translate}}</ion-col>
                    <ion-col text-center [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 1}">{{'Average' | translate}}</ion-col>
                    <ion-col text-end [ngClass]="{'text-bold': coinFeePolicy.value.rangeValue == 2}">{{'High' | translate}}</ion-col>
                </ion-row>
            </div>

        </ion-list>
    </div>
  </wide-header-page>